<template>
  爱好：
  <input type="checkbox" id="football" value="足球" v-model="checkedNames" />
  <label for="football">足球</label>
  <input type="checkbox" id="basketball" value="篮球" v-model="checkedNames" />
  <label for="basketball">篮球</label>
  <input type="checkbox" id="volleyball" value="排球" v-model="checkedNames" />
  <label for="volleyball">排球</label>

  <br />
  <span>您的选择是: {{ checkedNames }}</span>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
  setup () {
    const state = reactive({
      checkedNames: []
    })

    return {
      ...toRefs(state)
    }
  }
}
</script>
